import React, { useEffect, useState } from "react";
import "./FadeInOut.less"; // 导入样式文件
// @ts-ignore
import { SwitchTransition, CSSTransition } from "react-transition-group";
import { useLocation } from "react-router-dom";
const FadeInOut: React.FC<any> = ({ children, ...props }) => {
	const [animate, setAnimate] = useState(true); // 控制动画的触发
	const location = useLocation();

	const handleTransition = () => {
		setAnimate(false); // 禁用动画
		// 等待下一个事件循环周期启用动画
		setTimeout(() => {
			setAnimate(true);
		}, 0);
	};

	useEffect(() => {
		// 监听路由变化，触发动画
		handleTransition();
	}, [location]);

	return (
		<SwitchTransition mode="out-in">
			<CSSTransition key={animate ? "animate" : "no-animate"} classNames="fade" timeout={300}>
				<div>{children}</div>
			</CSSTransition>
		</SwitchTransition>
	);
};

export default FadeInOut;
